<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 200px;height: 200px;background-color: skyblue;display: none;}
    </style>
</head>
<body>
    <button>显示</button>
    <div class="box"></div>
    <script>
        // 案例 ：点击button，让box显示，点击文档区域让box消失
        // var btn=document.querySelector('button');
        // var box=document.querySelector('.box');
        // btn.onclick=function(){
        //     box.style.display="block";
        // }
        // document.onclick=function(){
        //     box.style.display="none";
        // }
        // 当一个元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会在触发。称为事件传播
        // 问题：点击btn显示box，冒泡到document上门去，document让它消失，最终btn看不到了

        // 一.如何阻止冒泡？
        // 根据事件流，存在冒泡，利用事件对象下吗的属性和方法阻止冒泡，让子元素不要去冒泡到父元素上面

        // event.stopPropagation() //标准浏览器上阻止事件冒泡和捕获
        // event.cancelBubble //IE浏览器事件冒泡和捕获

        // var btn=document.querySelector('button');
        // var box=document.querySelector('.box');
        // btn.onclick=function(e){
        //     e=e||event;
        //     box.style.display="block";
        //     e.stopPropagation();//标准浏览器上阻止事件冒泡
        // }
        // document.onclick=function(){
        //     box.style.display="none";
        // }

        // 二、阻止捕获
        // 阻止的父元素不会捕获到 子元素里面去

        var btn=document.querySelector('button');
        document.addEventListener('click',function (e) {  
            alert('document');
            e=e||event;
            e.stopPropagation();
        },true)
        btn.addEventListener('click',function () {
            alert('btn')
        },true)
    </script>
</body>
</html>